<template>
  <div class="questions-preview">
    <!-- 头部区域 -->
    <el-row>
      <el-col :span="6">
        【题型】：
        <span v-if="PreviewList.questionType === '1'">单选</span>
        <span v-else-if="PreviewList.questionType === '2'">多选</span>
        <span v-else>简答</span>
      </el-col>
      <el-col :span="6">【编号】：{{ PreviewList.id }}</el-col>
      <el-col :span="6">
        【难度】：
        <span v-if="PreviewList.difficulty === '1'">简单</span>
        <span v-else-if="PreviewList.difficulty === '2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6">【标签】：{{ PreviewList.tags }}</el-col>
      <el-col :span="6">【学科】：{{ PreviewList.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ PreviewList.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ PreviewList.direction }}</el-col>
    </el-row>
    <hr />

    <!-- 题干区域 -->
    <el-row>
      <el-col :span="24">
        【题干】：
        <div v-html="PreviewList.question" style="color:blue"></div>
        <div v-if="PreviewList.questionType === '1'">
          <div>单选题 选项: (以下选中的选项为正确答案)</div>
          <el-radio
            style="display:block; margin-top: 10px;"
            v-for="(item) in PreviewList.options"
            :key="item.id"
            :label="1"
            :value="item.isRight"
          >{{ item.title }}</el-radio>
        </div>
        <div v-else>
          <div>多选题 选项: (以下选中的选项为正确答案)</div>
          <el-checkbox
            style="display:block; margin-top: 10px;"
            v-for="(item) in PreviewList.options"
            :key="item.id"
            :value="item.isRight === 1 ? true : false"
          >{{ item.title }}</el-checkbox>
        </div>
      </el-col>
    </el-row>
    <hr />

    <!-- 参考答案 -->
    <el-row>
      <el-col :span="6">
        【参考答案】：
        <el-button type="danger" size="small" @click="preivewVideo()">视频答案预览</el-button>
        <div class="video" v-show="play">
          <video ref="video" :src="PreviewList.videoURL" controls></video>
        </div>
      </el-col>
    </el-row>
    <hr />

    <!-- 答案解析 -->
    <el-row>
      <el-col :span="20">
        【答案解析】：
        <span style="display:inline-block" v-html="PreviewList.answer"></span>
      </el-col>
    </el-row>
    <hr />

    <!-- 题目备注 -->
    <el-row>
      <el-col :span="18">【题目备注】：{{ PreviewList.remarks }}</el-col>
    </el-row>
  </div>
</template>

<script>
import { detail as getPreviewList } from '@/api/hmmm/questions'
export default {
  name: 'Preview',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 题目预览数据列表
      PreviewList: [],
      play: false
    }
  },
  created() {
    this.getViewList()
  },
  methods: {
    // 获取题目预览数据列表
    async getViewList() {
      const { data: res } = await getPreviewList({ id: this.item.id })
      console.log(res)
      this.PreviewList = res
      // console.log(this.item)
    },

    // 点击显示答案
    preivewVideo() {
      this.play = true
      this.$refs.video.play()
    }
  }
}
</script>

<style scoped lang='scss'>
.questions-preview {
  .el-col {
    padding: 10px 0;
  }
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }

  label.el-radio {
    display: block !important;
  }
}
</style>
<<<<<<< HEAD
=======

>>>>>>> 997c7929416b3c74c9a3d5a60ef3930edcad7b51
